<template>
  <div @click="cliEve">{{ name }}</div>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'DemoTemplate',
  components: {},
  setup() {
    const state = reactive({
      name: '诗仙李白',
    })

    const sex = '男'

    const cliEve = () => {
      state.name += '-' + sex
    }

    return {
      ...toRefs(state),
      cliEve,
    }
  },
})
</script>
<style scoped lang="scss"></style>
